<!-- 能耗趋势分析 -->
<template>
    <div class="app-container">
        <div class="slider">
            <!-- <el-select
                v-model="energyType"
                size="small"
                placeholder="请选择能源类型"
                @change="changeEnergy"
                style="width: 100%; margin-bottom: 8px"
            >
                <el-option
                    v-for="item in energyplanOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select> -->
            <div class="bar-header">
              <el-form inline class="searchItem">
                <el-form-item label="能源类型">
                    <el-select
                        v-model="energyType"
                        filterable
                        placeholder="请选择能源类型"
                        transfer
                        style="width: 180px;"
                        @change="changeEnergy"
                    >
                        <el-option
                            v-for="item in energyplanOptions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        />
                    </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="flex: 1" class="bar-container">
                <BaseTree
                    :isSearch="true"
                    :data="treeData"
                    :expandClick="false"
                    @nodeClick="handleNodeClick"
                    :defaultProps="defaultProps"
                    :defaultExpandedkeys="expandedKey"
                    :currentNodeKey="currentNodeKey"
                >
                </BaseTree>
            </div>
        </div>
        <div class="container-warpper">
            <div class="search">
                <el-form :inline="true" class="form">
                    <el-form-item label="时间:">
                        <el-select
                            v-model="timeCode"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择计划粒度"
                            @change="handleChangeTime"
                        >
                            <el-option
                                v-for="item in dateTypeOptions"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="timeCode">
                        <date-pick :type="timeCode" v-model="dateTime" />
                    </el-form-item>
                    <el-form-item style="float: right">
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-left: 6px"
                            :disabled="disabled"
                            icon="el-icon-search"
                            @click="runBootstrap"
                            >搜索</el-button
                        >
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-left: 6px"
                            :disabled="disabled"
                            icon="el-icon-search"
                            @click="handleExport"
                            >导出</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>

            <bar
                style="height: 300px; margin-top: 20px"
                :source="barSource"
                :unit="unit"
            ></bar>
            <div class="el-table">
                <el-table
                    class="table-container customTableClass"
                    :data="tableData"
                    style="margin-top: 20px"
                >
                    <el-table-column label="序号" type="index" width="50" />
                    <el-table-column prop="date" :label="'日期/时间'" />
                    <el-table-column prop="powerConsumption" :label="`用量(${unit})`">
                        <template slot-scope="{ row }">
                            {{ row.powerConsumption || '--' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    import { findTrendData } from '@/api/consumptionTrend.js'
    import {
        findEnergySelect,
        findProjectSubitemTreeByEnergyType,
        findEnumOptions,
    } from '@/api/common'
    import Bar from './components/bar'
    import DatePick from '@/components/DatePick/datePickerrange'
    import BaseTree from '@/components/BaseTree'
    import { download } from '@/utils/request'
    export default {
        name: 'trend',
        components: {
            Bar,
            DatePick,
            BaseTree,
        },
        computed: {
            disabled() {
                return !this.currentSelectNode
            },
        },
        watch: {},
        data() {
            return {
                contentHeight: 0,
                energyType: '',
                defaultProps: {
                    label: 'name',
                },
                expandedKey: [],
                currentNodeKey: '',
                treeData: [],
                timeCode: '',
                dateTime: '',
                barSource: [],
                tableData: [],
                format: 'YYYY-MM-DD',
                energyplanOptions: [],
                dateTypeOptions: [],
                currentSelectNode: null,
                unit: '',
                dataparams: {
                    projectId: this.$store.state.projectId,
                    energyTypeCode: '',
                    timeCode: '',
                    subitemId: '',
                    startDate: '',
                    endDate: '',
                },
            }
        },
        created() {
            this.initData()
        },
        async mounted() {
            await this.$nextTick()
            const container = document.querySelector('.app-main')
            this.contentHeight = container.getBoundingClientRect().height - 410
        },
        methods: {
            async initData() {
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyplanOptions = energyOptions
                this.energyType = this.getDefaultFirst(energyOptions)
                this.unit = _.head(energyOptions).unit ? _.head(energyOptions).unit : ''

                const result = await findEnumOptions('statisticTimeType')
                this.dateTypeOptions = result.data
                this.dateTime = [
                    dayjs().subtract(31, 'day').format('YYYY-MM-DD 00:00:00'),
                    dayjs().format('YYYY-MM-DD 23:59:59'),
                ]
                this.timeCode = 'day'
                this.getSubItemTree()
            },

            /** 导出按钮操作 */
            handleExport() {
                this.getDataparams()
                const suffix = this.dateTime.map((item) => item.split(' ')[0]).join('~')
                // console.log(typeof(this.dataparams), "%%%%%%%%%");
                console.log(typeof({
                        ...this.dataparams,
                    }), "%%%%%%%%%");
                download(
                    '/consumption/trend/list-export',
                    {
                        ...this.dataparams,
                    },
                    `能耗趋势_(${suffix}).xlsx`
                )
            },
            getSubItemTree() {
                findProjectSubitemTreeByEnergyType({
                    projectId: this.$store.state.projectId,
                    energyType: this.energyType,
                }).then((resp) => {
                    const { data } = resp
                    if (data && data.length) {
                        this.treeData = data
                        const id = data[0].id
                        this.expandedKey = [id]
                        this.currentNodeKey = id
                        this.currentSelectNode = data[0]
                        this.runBootstrap()
                    } else {
                        this.treeData = []
                    }
                })
            },
            changeEnergy() {
                const currentSelect = this.energyplanOptions.find(
                    (item) => item.code == this.energyType
                )
                this.unit = currentSelect && currentSelect.unit ? currentSelect.unit : ''
                this.getSubItemTree()
            },

            getDefaultFirst(data) {
                let result = ''
                if (data && data.length) {
                    result = _.head(data).code
                }
                return result
            },
            handleChangeTime(value) {
                switch (value) {
                    case 'year':
                        this.format = 'YYYY'
                        break
                    case 'month':
                        this.format = 'YYYY-MM'
                        break
                    case 'day':
                    case 'hour':
                        this.format = 'YYYY-MM-DD'
                        break
                }
            },
            handleNodeClick(data) {
                this.currentSelectNode = data.data
                this.runBootstrap()
            },
            getDataparams() {
                const dateTime = this.dateTime
                if (dateTime && dateTime.length !== 0) {
                    this.dataparams.startDate = dateTime[0]
                    this.dataparams.endDate = dateTime[1]
                }
                Object.assign(this.dataparams, {
                    subitemId:
                        this.currentSelectNode.parentId == -1 ? '' : this.currentSelectNode.id,
                    energyTypeCode: this.energyType,
                    timeCode: this.timeCode,
                })
            },
            runBootstrap() {
                this.barSource = []
                this.tableData = []
                this.getDataparams()
                findTrendData(this.dataparams).then((resp) => {
                    if (resp.code === 200 && resp.data) {
                        let data = resp.data
                        this.barSource = data
                        this.tableData = data
                    }
                })
            },

            filterNode(value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
        },
    }
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
    margin-bottom: 0 !important;
    line-height: 36px !important;
    height: 36px !important;
    margin-right: 0 !important;
}
::v-deep .el-form-item__label {
    line-height: 36px !important;
    height: 36px!important;
}
::v-deep .el-form-item__content {
    line-height: 36px !important;
    height: 36px !important;
}
::v-deep .el-input__inner {
    line-height: 32px !important;
    height: 32px !important;
}
.app-container {
    display: flex;
    height: 100%;
    .slider {
        width: 285px;
        margin-right: 12px;
        // background: $table-search-bg-color;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        
        .bar-header {
            padding: 20px 10px;
            margin-bottom: 15px;
            background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
            box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
            border: 1px solid rgba(0, 144, 242, 0.58); 
            border-radius: 10px;
            .searchItem {
                display: flex;
                justify-content: center;
            }
        }
        .bar-container {
            flex: 1;
            // height: calc(100vh - 220px);
            overflow-y: auto;
            padding: 0 10px;
            background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
            box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
            border: 1px solid rgba(0, 144, 242, 0.58); 
            border-radius: 10px;
        }
    }
    .container-warpper {
        flex: 1;
        overflow-y: auto;
        .search {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 21px 15px;
            background-color: #0C2E64;
            margin-bottom: 15px;
            border-radius: 6px;
        }
        .process {
            margin-bottom: 20px;
            padding: 0 10px;
        }
        .table-container {
            margin-top: 10px;
        }
    }
}
::v-deep {
    .el-icon-top {
        color: #8bd350;
    }
    .el-icon-bottom {
        color: #ff4f45;
    }
    .form {
        width: 100%;
    }
    .form .el-form-item {
        margin-bottom: 0 !important;
    }
    .divider {
        margin: 10px 0 !important;
    }
    .el-progress-bar__outer {
        background-color: rgba(235, 238, 245, 0.2);
    }
    .customTableClass {
        &::after,
        &::before {
            background-color: #002458 !important;
        }
    }
    .el-table {
        background: $table-bg;
        tr {
            background: $table-defalut-tr-bg;
        }
        .el-table__expand-icon {
            color: $table-search-text-color;
        }
        ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: $table-striped-bg;
        }
        ::v-deep .el-table::before,
        .el-table--group::after,
        .el-table--border::after {
            background-color: $table-before-line-color;
        }
        ::v-deep .el-table__fixed-right::before {
            background-color: $table-before-line-color;
        }
    }
}
</style>
